<template>
  <div class="bg">
    <div class="search">
      <p>
        <img
          src="../../../assets/img/pc/logo.png"
          alt=""
          width="200px"
          style="margin-bottom: 30px"
        />
      </p>
      <p class="title">欢迎您使用</p>
      <p class="title">科医人认证机构验证平台</p>
      <p class="tip">
        您可以通过输入医院名称，验证您所关心的医美机构是否部署有科医人公司记录在册的官方设备。
      </p>
      <section class="select-type">
        <p class="tip">请选择您要查验的认证类别：</p>
        <el-select placeholder="认证类别" style="width: 238px" v-model="type">
          <el-option
            v-for="(item, index) in typeOption"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
            <div class="option-item" style="border-bottom: 1px solid #999">
              {{ item.label }}
            </div>
          </el-option>
        </el-select>
      </section>
      <section class="search-input">
        <p class="tip">请输入您想要查证的医院名称（支持模糊搜索）</p>
        <el-autocomplete
          v-model="search"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          placeholder="输入医院名称模糊查询"
          style="width: 238px"
        />
      </section>
      <section class="submit">
        <div class="submit-btn" @click="getList">查询</div>
      </section>
      <section class="suggest">
        <div class="line">
          <p>验证未成功的医疗机构科医人公司无法保证其使用原厂正品设备</p>
          <p>为保障您的合法权益请至已认证的专业医疗机构进行治疗</p>
        </div>
        <div class="">
          <p>科医人客服热线</p>
          <p>400-810-5811/800-990-5811</p>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "search",
  data() {
    return {
      typeOption: [
        {
          value: "AOPT",
          label: "AOPT超光子",
        },
        {
          value: "M22王者之冠",
          label: "M22王者之冠",
        },
        {
          value: "M22王者之尊",
          label: "M22王者之尊",
        },
      ],
      type: "",
      search: "",
      timer: "",
    };
  },
  methods: {
    ...mapMutations(["setName", "setType"]),
    getList() {
      if (this.type == "" || this.search == "") return;
      this.$axios
        .get("/hospital/getList", {
          params: {
            name: this.search.trim(),
            type: this.type,
          },
        })
        .then((res) => {
          this.pageNum = 1;
          this.tableData = res.data;
          this.setName(this.search);
          this.setType(this.type)
          if (res.data && res.data.length > 0) {
            this.$router.push({
              name: "HospitalVerifySuccess"
            });
          } else {
            this.$router.push({
              name: "HospitalVerifyFail"
            });
          }
        });
    },
    querySearchAsync(queryString, cb) {
      this.$axios
        .get("/hospital/getNameList", {
          params: {
            name: queryString.trim(),
            type: this.type,
          },
        })
        .then((res) => {
          if (res.data && res.data.length > 0) {
            let d = res.data;
            clearTimeout(this.timer);
            this.timer = setTimeout(function () {
              cb(d);
            }, 1000 + Math.random());
          }
        });
    },
  },
};
</script>
<style lang="css" scoped>
.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #4849bf;
}
.search {
  position: absolute;
  width: 100%;
  max-width: 1920px;
  min-width: 1668px;
  height: 100%;
  min-height: 1000px;
  padding: 100px 120px;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  background: url(../../../assets/img/pc/header.jpg) no-repeat center;
  padding-bottom: 2.5rem;
  background-size: contain;
  box-sizing: border-box;
  text-align: left;
  color: #fff;
}

.title {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  width: 100%;
  font-size: 30px;
  line-height: 50px;
}
.tip {
  font-size: 16px;
  line-height: 60px;
}
.select-type {
  margin-bottom: 80px;
}
.search-input {
  margin-bottom: 80px;
}
.submit {
  position: relative;
  margin-top: 50px;
  text-align: left;
  width: 100%;
}
.submit .submit-btn {
  width: 120px;
  line-height: 3rem;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
}
.suggest {
  width: 100%;
  display: flex;
  line-height: 24px;
  font-size: 14px;
  margin-top: 50px;
}
.suggest .line {
  border-right: 1px solid #fff;
  padding-right: 30px;
  margin-right: 30px;
}
</style>
